{% extends "base.html" %}

{% block title %}密码生成成功 - 学生作业提交系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
        <div class="card shadow">
            <div class="card-header bg-success text-white text-center">
                <h4 class="mb-0">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    首次登录成功
                </h4>
            </div>
            <div class="card-body">
                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                    <strong>重要提醒：</strong>请务必记住以下信息！
                </div>
                
                <div class="mb-4">
                    <h5>您的登录信息：</h5>
                    <div class="row">
                        <div class="col-sm-3">
                            <strong>学号：</strong>
                        </div>
                        <div class="col-sm-9">
                            <code class="fs-5">{{ student_id }}</code>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-sm-3">
                            <strong>姓名：</strong>
                        </div>
                        <div class="col-sm-9">
                            <span class="fs-5">{{ name }}</span>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-sm-3">
                            <strong>登录密码：</strong>
                        </div>
                        <div class="col-sm-9">
                            <div class="input-group">
                                <input type="text" class="form-control form-control-lg" 
                                       id="password" value="{{ password }}" readonly
                                       style="font-family: monospace; font-weight: bold; color: #d63384;">
                                <button class="btn btn-outline-secondary" type="button" 
                                        onclick="copyPassword()">
                                    <i class="bi bi-clipboard"></i> 复制
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="alert alert-info">
                    <h6><i class="bi bi-info-circle me-2"></i>下次登录说明：</h6>
                    <ul class="mb-0">
                        <li>用户名：您的学号 <code>{{ student_id }}</code></li>
                        <li>密码：上面显示的16位密码</li>
                        <li>请妥善保存此密码，系统不会再次显示</li>
                    </ul>
                </div>

                <div class="text-center">
                    <a href="{{ url_for('assignments') }}" class="btn btn-primary btn-lg">
                        <i class="bi bi-arrow-right-circle me-2"></i>
                        继续进入作业管理
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function copyPassword() {
    const passwordInput = document.getElementById('password');
    passwordInput.select();
    passwordInput.setSelectionRange(0, 99999); // 移动端兼容
    
    try {
        document.execCommand('copy');
        // 显示复制成功提示
        const btn = event.target.closest('button');
        const originalHTML = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check"></i> 已复制';
        btn.classList.add('btn-success');
        btn.classList.remove('btn-outline-secondary');
        
        setTimeout(() => {
            btn.innerHTML = originalHTML;
            btn.classList.remove('btn-success');
            btn.classList.add('btn-outline-secondary');
        }, 2000);
    } catch (err) {
        alert('复制失败，请手动复制密码');
    }
}

// 页面加载时自动选中密码
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('password').focus();
});
</script>
{% endblock %} 